<style>
.uc-table .t-row .cell:nth-child(1):before {
  content: 'JustWap流动性：';
}

.uc-table .t-row .cell:nth-child(2):before {
  content: '矿池流动性：';
}

.uc-table .t-row .cell:nth-child(3):before {
  content: '当前已持仓：';
}

.uc-table .t-row .cell:nth-child(4):before {
  content: '账户总资产：';
}

.square_gia {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  padding: .2344rem 0;
  background: #ebf1fe !important;
}

.repo-item {
  width: 25%;
  text-align: center;
}

.repo-item h1 {
  margin: 0;
  color: white;
  font-weight: 400;
  font-size: 18px;
}

.repo-item .name {
  font-size: 10px;
  color: #c4c7d0;
}
</style>

<template>
  <div class="authorize">
    <bread-crumb>节点</bread-crumb>
    <div class="uc-body">
      <div class="control-bar">
        <span class="list-title">您所有的下线数量: 共{{ offlineData }}个</span>
      </div>

      <div class="uc-table">
        <div class="t-row td" v-cloak="">
          <div class="cell">{{ fundingData.flow }}</div>
          <div class="cell">{{ fundingData.mining }}</div>
          <div class="cell">{{ fundingData.holding }}</div>
          <div class="cell">{{ fundingData.currentAmount }}</div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>

//数据
import breadCrumb from '../components/breadCrumb.vue'
import {mixins} from '@/mixins/mixins'
import {mixinsUtils} from '@/mixins/mixins.utils'
import {API_OWN_FUNDS, API_OWN_OFFLINE_DATA} from "../../../axios/api";
import {mapGetters, mapState} from 'vuex'

//导出
export default {
    name: "usrenode",
    components: {breadCrumb},
    mixins: [mixins,  mixinsUtils],
    data() {
        return {
          //资金数据
          fundingData: {},
          //下线数据
          offlineData: '',
 }

    },
  computed:{
    ...mapState(['tornlinkToken', 'xg']),//映射普通数据
    ...mapGetters(['isLogin'])// 映射计算数据
  },
  mounted() {
    let that = this;
    let xgObj = this.xg;
    this.addArray = xgObj.pairAddress + ',' + xgObj.token + ',' + "TZCyRjP8weAyXEEEVYfboL6KtRXtbpFUo3";

    if (this.isLogin == false) {
      // Swal.fire({
      //   type: 'error',
      //   text: '请先登录钱包',
      // })
    }

      this.getfundingData();
      this.getOfflineData();
  },
  created() {
  },

  methods: {
    //请求当前用户：资金数据 [justwap lp合约地址(查看lp) + token合约地址(查看持仓) +xg lp合约地址(查看lp) + 需要查看的用户]
    getfundingData() {
      let that = this
      API_OWN_FUNDS({
        addArray: this.addArray,
        accountAddress: this.sender
      }).then((res) => {
        console.log(res);
        this.fundingData = res;
      }).catch((e) => {
        console.log('请求失败', e)
      });
    },

    //请求当前用户： 下线数据
    getOfflineData() {
      let that = this
      API_OWN_OFFLINE_DATA({accountAddress: this.sender}).then((res) => {
        console.log(res);
        this.offlineData = res.size;
      }).catch((e) => {
        console.log('请求失败！', e)
      });
    }

  }
}
</script>

<style lang="less" scoped>

/*公共变量*/
@import '~@/assets/global.less';

/*排序与筛选*/
.control {
  display: flex;
  justify-content: space-between;

}

/*用户中心表格*/
.uc-table {
  color: #7f8eab;
  margin-top: 0px;
}

.uc-table .th, .uc-table .td { /*统一设置*/
  font-size: 14px;
  padding: 10px;
  border-bottom: 1px solid #efefef;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.uc-table .th {
  font-size: 14px;
  font-weight: bold;
}

.uc-table .th .cell {
}

.uc-table .td {
}

.uc-table .td .cell {
}

.uc-table .t-row .cell {
}

.uc-table .t-row .cell:nth-child(1) {
  flex: 5
}

.uc-table .t-row .cell:nth-child(2) {
  flex: 2
}

.uc-table .t-row .cell:nth-child(3) {
  flex: 2
}

.uc-table .t-row .cell:nth-child(4) {
  flex: 1
}

/**********************适应************************/
@media screen and (max-width: @MINSCREEN) {

  /*排序与筛选*/
  .control {
    display: block;

    .control {
    }

    .order {
      margin-top: 5px;
    }
  }

  .uc-table .th {
    display: none !important;
  }

  .uc-table .t-row {
    display: block;
    padding: 10px 0px;
  }

  .uc-table .t-row .cell {
    width: 100% !important;
    font-size: 14px;
  }

}
</style>